
	<template>
		<div class="funnelViewBox">
			<template>
				<!-- 总转化率 -->
				<el-container class="funnel-view-small">
					<el-aside width="100%">
						<!-- 总转化率 -->
						<div class="conversionRatesBox collectBox">
							<div class="viewValBox">
								<div>总转化率</div>
								<div>{{ funnelReportResData.funnelDetail[0].completionRate }} %</div>
							</div>

							<img class="icon-arrow" src="../../../assets/img/arrow-down.png" />
						</div>
					</el-aside>
				</el-container>

				<!-- 步骤 -->
				<div class="step step-small" v-for="(item, i) in funnelReportResData.eventNames" :key="i">
					<!-- 步骤 -->
					<div>
						<div width="100%">
							<div class="stepBox">
								<span class="stepNum">{{ i + 1 }}</span>
								<span class="stepTitle">{{ item.cname }}</span>
								<span class="stepUser">{{ funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].convertedUser }} 个</span>
							</div>
						</div>
					</div>
					<!-- 柱图 -->
					<el-main style="background-color: #fafafa;" class="step-view">
						<div class="stepBar" v-if="funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].conversionRate >= 0"
								 :style="{ width: funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].conversionRate + '%' }"></div>

						<div class="stepBar" v-if="funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].conversionRate < 0"
								 :style="{ width: '0%' }"></div>
					</el-main>

					<!-- 向下箭头 -->
					<el-container class="arrow">
						<el-aside width="100%">
							<!-- 转化率 -->
							<div class="conversionRatesBox" v-if="(i + 1) < funnelReportResData.eventNames.length">
								<div class="viewValBox" v-if="funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].conversionRate >= 0">
									<div>{{ funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].conversionRate }} %</div>
								</div>

								<div class="viewValBox" v-if="funnelReportResData.funnelDetail[0].steps[i].rows[byValues.ind].conversionRate < 0">
									<div style="color: #f7565e;">0 %</div>
								</div>

								<img class="icon-arrow" src="../../../assets/img/arrow-down.png" />
							</div>

						</el-aside>

						<el-main></el-main>
					</el-container>
				</div>
			</template>

		</div>
	</template>

	<script>
		export default {

			name: 'view-funnel',

			props: {
				windowSize: {
					default: () => {
						return 1;
					}
				},
				funnelReportResData: {},

				byValues: {
					type: Object,
					default: () => {
						return { ind: 0, name: '总体' };
					},
				},
			},

			data() {
				return {}
			},

			created() {
				console.log("funnelReportResData", this.funnelReportResData)
			},

			methods: {},
		}
	</script>



	<style scoped lang="scss">

		.funnelViewBox {
			.el-container { margin-bottom: 5px; height: auto; }

			.conversionRatesBox {
				text-align: center;

				.viewValBox {
					width: 60px;
					background-color: #eaeff4;
					padding: 5px 0;
					margin: 0 auto -3px auto;
				}

				.icon-arrow { width: 100px; }
			}

			/* 总转化率 */
			.collectBox .viewValBox { width: 100px; }

			.stepBox {
				height: 28px;
				line-height: 26px;
				background-color: #fafafa;
				border: 1px solid #e7e7e7;

				.stepNum {
					display: inline-block;
					height: 17px;
					line-height: 17px;
					width: 17px;
					margin: 0 5px;
					text-align: center;
					vertical-align: middle;
					background: #c3e6d0;
					color: #2dca93;
				}

				.stepUser { float: right; padding: 0 10px; }
			}



			.el-main {
				padding: 0;

				.stepBar {
					height: 30px;
					background-color: #57a3e3;
				}
			}

			.funnel-view-small {

			}
			.step-small {
				.step-view {
					margin-bottom: 10px;
				}
				.stepBox {
					background-color: transparent;
					border: none;
				}
			}
		}

		.el-container .el-main {
			text-align: center;
			background-color: transparent;
		}


	</style>

